import React, { FC, useEffect, useRef, useState } from 'react'
import type { ActionType, ProColumns } from '@ant-design/pro-table'
import ProTable from '@ant-design/pro-table'
import { Popconfirm, Button, message } from 'antd'
import { ApplicationDTO } from '@/model/efficient/ApplicationDTO'
import { applicationPage, applicationRemove } from '@/api/efficient/application'
import ApplicationForm from '@/views/efficient/application/components/ApplicationForm'
import { ModelFormModeEnum } from '@/enums/ModelFormModeEnum'
import { getByTypeCode } from '@/api/system/dict'
import { DictCodeConsts } from '@/api/consts/DictCodeConsts'
import { SystemDictTypeDTO } from '@/model/system/SystemDictTypeDTO'
import ApplicationSetServerForm from '@/views/efficient/application/components/ApplicationSetServerForm'

import './index.scss'
import { dictToValueEnum } from '@/utils/dictUtil'

const Application: FC = () => {
  const actionRef = useRef<ActionType>()

  // 字典处理
  const [applicationTypeDict, setApplicationTypeDict] = useState<SystemDictTypeDTO>(null)
  useEffect(() => {
    getByTypeCode(DictCodeConsts.applicationType)
      .then((res: SystemDictTypeDTO) => {
        setApplicationTypeDict(res)
      })
  }, [])

  // 事件
  const applicationRemoveOnConfirm = async (record: ApplicationDTO) => {
    await applicationRemove(record.id)
    message.success(`已删除 ${record.name}`)
    await actionRef.current.reload()
  }
  // 表格列
  const columns: ProColumns<ApplicationDTO>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '应用code',
      dataIndex: 'code',
      search: false,
    },
    {
      title: '应用名称',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: applicationTypeDict?.name,
      dataIndex: 'applicationType',
      valueEnum: () => {
        return dictToValueEnum(applicationTypeDict)
      },
    },
    {
      title: '负责人',
      dataIndex: 'principal',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      copyable: true,
      ellipsis: true,
      search: false,
    },
    {
      title: 'git地址',
      dataIndex: 'gitAddress',
      copyable: true,
      ellipsis: true,
      search: false,
      render: (_, item) => <a href={item.gitAddress}>{_}</a>,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record) => [
        <ApplicationSetServerForm applicationId={record.id} key={record.id} />,
        <ApplicationForm mode={ModelFormModeEnum.update} row={record} applicationTypeDict={applicationTypeDict} actionRef={actionRef} key={record.id} />,
        <Popconfirm
          title="确认删除吗?"
          okText="是"
          cancelText="否"
          onConfirm={() => { applicationRemoveOnConfirm(record) }} // 点击确认的回调
          key={record.id}
        >
          <Button type="link">删除</Button>
        </Popconfirm>,
      ],
    },
  ]

  return (
    <div className="application">
      <ProTable<ApplicationDTO>
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          const data = await applicationPage(params)
          return {
            data: data.records,
            success: true,
            total: data.total,
          }
        }}
        columnsState={{
          persistenceKey: 'pro-table-application',
          persistenceType: 'localStorage',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="应用"
        toolBarRender={() => [
          <ApplicationForm mode={ModelFormModeEnum.add} applicationTypeDict={applicationTypeDict} actionRef={actionRef} />,
        ]}
      />
    </div>
  )
}

export default Application
